<!--
 * @Description:
 * @Autor: zhangqj
 * @Date: 2021-01-22 18:16:17
 * @LastEditors: xinsang
 * @LastEditTime: 2021-03-27 16:06:39
-->
<template>
  <div ref="myEchart" />
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'DataLine',
  props: {
    xAxisdata: {
      type: Array,
      default() {
        return []
      }
    },
    seriesdata: {
      type: Array,
      default() {
        return []
      }
    },
    series2data: {
      type: Array,
      default() {
        return []
      }
    },
    timeTab: {
      type: Number,
      default() {
        return 1
      }
    }
  },
  watch: {
    xAxisdata: {
      handler(val) {
        this.lineSet()
      },
      deep: true
    }
  },
  methods: {
    f_number(data) {
      let num = data
      num = num / 100
      const moneyUnits = ['', '万', '亿', '万亿']
      const dividend = 10000
      let curentNum = num
      // 转换数字
      let curentUnit = moneyUnits[0]
      // 转换单位
      for (let i = 0; i < 4; i++) {
        curentUnit = moneyUnits[i]
        if (this.strNumSize(curentNum) < 5) {
          break
        }
        curentNum = curentNum / dividend
      }
      const m = {
        num: 0,
        unit: ''
      }
      m.num = curentUnit
        ? curentNum.toFixed(2)
        : this.toDecimal2NoZero(curentNum)
      m.unit = curentUnit
      return curentUnit ? m.num + m.unit : m.num + m.unit
    },
    toDecimal2NoZero(x) {
      const tos = 100
      const f = Math.round(x * tos) / tos
      const s = f.toString()
      return s
    },
    strNumSize(tempNum) {
      const stringNum = tempNum.toString()
      const index = stringNum.indexOf('.')
      let newNum = stringNum
      if (index !== -1) {
        newNum = stringNum.substring(0, index)
      }
      return newNum.length
    },
    fdate(data) {
      if (this.timeTab < 2) {
        return (
          data.split(' ')[1].split(':')[0] +
          ':' +
          data.split(' ')[1].split(':')[1]
        )
      } else if (this.timeTab < 4) {
        return (
          data.split(' ')[0].split('-')[1] +
          '/' +
          data.split(' ')[0].split('-')[2] +
          ' ' +
          data.split(' ')[1].split(':')[0] +
          ':' +
          data.split(' ')[1].split(':')[1]
        )
      } else {
        return (
          data.split(' ')[0].split('-')[1] +
          '/' +
          data.split(' ')[0].split('-')[2]
        )
      }
    },
    showDate(date) {
      if (this.timeTab < 4) {
        return date.split(':')[0] + ':' + date.split(':')[1]
      } else {
        return date.split(' ')[0]
      }
    },
    getMax(data) {
      let maxNumber = 0
      data.forEach(item => {
        if (Number(item) > maxNumber) {
          maxNumber = item
        }
      })
      return maxNumber
    },
    getMin(data) {
      let minNumber = Number(data[0])
      data.forEach(item => {
        if (Number(item) < minNumber) {
          minNumber = item
        }
      })
      return minNumber
    },
    lineSet() {
      const that = this
      const myChart = echarts.init(this.$refs.myEchart)
      const pvMax = that.getMax(this.series2data)
      const gmvMax = that.getMax(this.seriesdata)
      window.onresize = myChart.resize
      myChart.setOption({
        tooltip: {
          backgroundColor: '#485465',
          padding: [10, 15],
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#DDDDDD'
            }
          },
          formatter: function(val) {
            if (val.length > 0 && val.length === 1) {
              const xval = val[0].seriesName
              const xval0 = that.f_number(val[0].value)
              const xval1 = that.showDate(val[0].name)
              return `${xval1}
                      </br>${xval}: ${xval0}`
            } else {
              const xval1 = that.showDate(val[0].name)
              const xval = val[0].seriesName
              const xval0 = that.f_number(val[0].value)
              const yval = val[1].seriesName
              const yval0 = that.f_number(val[1].value)
              return `${xval1}
                    </br>${yval}: ${yval0}
                    </br>${xval}: ${xval0}`
            }
          }
        },
        grid: {
          left: '3%',
          right: '2%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          axisTick: {
            // 刻度线
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#DDDDDD'
            }
          },
          axisLabel: {
            color: '#666666',
            formatter: function(v) {
              return that.fdate(v)
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#E4E4E4',
              type: 'dotted'
            }
          },
          type: 'category',
          boundaryGap: false,
          data: this.xAxisdata
        },
        yAxis: [
          {
            show: true,
            nameTextStyle: {
              color: '#666666'
            },
            type: 'value',
            axisLabel: {
              color: '#666666',
              formatter: function() {
                return ''
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              // 刻度线
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#E4E4E4',
                type: 'dotted'
              }
            },
            min: 0,
            max: gmvMax * 1.2,
            interval: (gmvMax * 1.2) / 5
          },
          {
            show: true,
            nameTextStyle: {
              color: '#666666'
            },
            type: 'value',
            axisLabel: {
              color: '#666666',
              formatter: function() {
                return ''
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              // 刻度线
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#E4E4E4',
                type: 'dotted'
              }
            },
            min: 0,
            max: pvMax * 1.2,
            interval: (pvMax * 1.2) / 5
          }
        ],
        color: ['#FF641B', '#6384FF'],
        legend: {
          right: '30px',
          itemHeight: 10,
          itemWidth: 20,
          textStyle: {
            fontSize: 12,
            rich: {
              a: {
                padding: [-3, 0, 0, 0]
              }
            }
          },
          formatter: name => '{a|' + name + '}',
          data: [
            {
              icon:
                'path://M0 0m407.253811 0l814.507621 0q407.253811 0 407.253811 407.253811l0 0q0 407.253811-407.253811 407.253811l-814.507621 0q-407.253811 0-407.253811-407.253811l0 0q0-407.253811 407.253811-407.253811Z',
              name: 'PV'
            },
            {
              icon:
                'path://d="M0 0m407.253811 0l814.507621 0q407.253811 0 407.253811 407.253811l0 0q0 407.253811-407.253811 407.253811l-814.507621 0q-407.253811 0-407.253811-407.253811l0 0q0-407.253811 407.253811-407.253811Z"',
              name: 'GMV'
            }
          ]
        },
        series: [
          {
            name: 'GMV',
            data: this.seriesdata,
            type: 'line',
            symbol: 'emptyCircle',
            yAxisIndex: 0,
            showSymbol: false,
            symbolSize: 4,
            smooth: true,
            lineStyle: {
              width: 2,
              color: '#FF641B'
            }
          },
          {
            name: 'PV',
            data: this.series2data,
            type: 'line',
            symbol: 'emptyCircle',
            symbolSize: 4,
            yAxisIndex: 1,
            showSymbol: false,
            smooth: true,
            lineStyle: {
              width: 2,
              color: '#6384FF'
            },
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#e6f0ff'
                    },
                    {
                      offset: 1,
                      color: '#f6faff'
                    }
                  ],
                  globalCoord: false
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style></style>
